<template>
	<a-modal
		v-model:visible="visibleModal"
		:title="props.title"
		:width="1000"
		:mask-closable="false"
		:destroy-on-close="true"
		@ok="handleOk"
		@cancel="handleClose"
	>
		<a-card :bordered="false">
			<a-form
				style="margin-bottom: 12px"
				ref="searchFormRef"
				name="advanced_search"
				class="ant-advanced-search-form"
				:model="searchFormState"
			>
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item name="searchKey" label="关键字">
							<a-input v-model:value="searchFormState.searchKey" placeholder="请输入关键字" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-button type="primary" @click="tableRef.refresh(true)">
							<template #icon><SearchOutlined /></template>
							查询
						</a-button>
						<a-button class="snowy-buttom-left" @click="reset">
							<template #icon><redo-outlined /></template>
							重置
						</a-button>
					</a-col>
				</a-row>
			</a-form>
			<s-table
				:row-key="(record) => record.key"
				ref="tableRef"
				:rowSelection="options.rowSelection"
				:columns="props.columns"
				:data="(parameter) => doSearch(parameter)"
				bordered
				:scroll="{ x: 1000 }"
			>
				<template #bodyCell="{ column, index }">
					<template v-if="column.dataIndex === 'index'">
						<span>{{ index + 1 }}</span>
					</template>
				</template>
			</s-table>
		</a-card>
	</a-modal>
</template>

<script setup name="searchProducts">
	import { toRaw } from 'vue'
	import { message } from 'ant-design-vue'
	const props = defineProps({
		title: {
			type: String,
			default: '选择商品'
		},
		columns: {
			type: Array,
			default: []
		},
		dataProvider: {
			type: Function,
			required: true
		}
	})

	// 定义tableDOM
	const tableRef = ref(null)
	const searchFormRef = ref()

	const searchFormState = ref({})
	const visibleModal = ref(false)
	let selectProduces = []
	const selectedRowKeys = ref([])

	const options = {
		rowSelection: {
			selectedRowKeys: selectedRowKeys,
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
				selectProduces = selectedRows.map((it) => {
					return toRaw(it)
				})
			}
		}
	}

	const doSearch = (parameter) => {
		return props.dataProvider(Object.assign(parameter, searchFormState.value))
	}

	const showDialog = (selectItems) => {
		visibleModal.value = true
		if (selectItems) {
			nextTick(() => {
				let keys = selectItems.map((element) => {
					return element['key']
				})
				selectProduces = [].concat(selectItems)
				selectedRowKeys.value = keys
				tableRef.value.updateSelect(keys, selectItems)
			})
		}
	}
	defineExpose({
		showDialog
	})

	const handleClose = () => {
		searchFormRef.value.resetFields()
		tableRef.value.clearSelected()
		visibleModal.value = false
	}
	const emit = defineEmits(['onProductChange'])
	const handleOk = () => {
		let rowKeys = selectedRowKeys.value
		if (rowKeys.length <= 0) {
			message.warning(`请${props.title}`)
		} else {
			emit('onProductChange', selectProduces)
			visibleModal.value = false
		}
	}

	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
</script>

<style scoped>
	.ant-form-item {
		margin-bottom: 0 !important;
	}

	.primaryAdd {
		margin-right: 10px;
	}

	.snowy-buttom-left {
		margin-left: 8px;
	}
</style>
